<seed-content #content>
  <seed-toolbar-header>
    <seed-toolbar-title>服务详情</seed-toolbar-title>
    <seed-toolbar-menu></seed-toolbar-menu>
  </seed-toolbar-header>
  <div class="seed-goods-detail-warp" >
    <goods-slider  [slider]="(data | async)?.imgList" ></goods-slider>
    <div class="goods-part">
      <div class="goods-title">
        {{(data | async).goodsFullName}}
      </div>
      <div class="goods-remarks" *ngIf="(data | async)?.remarks">
        {{(data | async).remarks}}
      </div>
      <div class="goods-price-box seed-flexbox">
        <span class="currency">￥</span>
        <span class="goods-price">
          {{goodsPrice}}
        </span>
        <p class="cost-price">
          <i class="currency">￥</i>
         <span> {{dataStore.costPrice }}</span>
        </p>
      </div>
    </div>

    <div class="goods-part">
      <seed-item class="goods-spec add-border-bottom seed-item-block"
                 (click)="handleSelectedSpecEvent(modal1)"
      >
        {{specText}}
        <seed-icons [icon]="'arrowRight'"></seed-icons>
      </seed-item>
      <seed-item
        class="goods-spec add-border-bottom seed-item-block"
        (click)="modal2.show()"
      >
        商品参数
        <seed-icons [icon]="'arrowRight'"></seed-icons>
      </seed-item>

      <seed-item
        [ngClass]="{'add-border-bottom': (data | async).goodsCateCode1 == 'V18' }"
        class="goods-spec  seed-item-block"
        (click)="modalShow()"
      >
        领劵
        <seed-icons [icon]="'arrowRight'"></seed-icons>
      </seed-item>

      <!-- 新增商品FAQ详情入口 2017-10-16 zhupw -->
      <seed-item class="goods-spec seed-item-block"
                 *ngIf="(data | async).goodsCateCode1 == 'V18'"
                 (click)="goToGoodsFAQ(data.goodsCateCode1)"
      >
        常见问题
        <seed-icons [icon]="'arrowRight'"></seed-icons>
      </seed-item>
    </div>


    <div class="goods-part">
      <h3 class="goods-info-title" downloadApp>图文详情</h3>
      <div class="goods-info" [innerHtml]="(data | async)?.descApp">

      </div>
    </div>

    <seed-modal #modal1 [content]="content">
      <seed-goods-purchase [goods]="(data | async)"
                           class="seed-modal-content"
                           (onSelected)="handleSelectedSku($event)"
      ></seed-goods-purchase>
    </seed-modal>

    <seed-modal #modal2 [content]="content">
      <seed-goods-spec [baseInfoList]="(data | async)?.baseInfoList" class="seed-modal-content"></seed-goods-spec>
    </seed-modal>

    <seed-modal #modal3 [content]="content">

      <div id="couponWrap" #sdf class="coupon-list seed-goods-spec seed-modal-content seed-flexbox seed-flexbox-column">
        <div class="goods-close-btn" (click)="closeModal()">
          <button></button>
        </div>

        <div class="goods-spec-title">优惠券</div>

        <seed-infinite-scroll [container]="sdf"> <!--(infiniteScroll)="getCouponList()"-->

          <div *ngIf=" couponList?.length > 0 ">
            <div class="goods-purchase-content" *ngFor="let coupon of couponList ; let i = index ;">

              <seed-coupon-card [coupon]="coupon" [markType]="0" (goToDetail)="changeCouponStatus(i)"></seed-coupon-card>
            </div>

            <seed-infinite-scroll-content class="load-bg" *ngIf="couponList.length > 5"></seed-infinite-scroll-content>
          </div>

        </seed-infinite-scroll>
        <missing-default-content *ngIf="couponList.length == 0"></missing-default-content>


      </div>

    </seed-modal>

  </div>
  <div class="goods-purchase-btn seed-scroll-outside seed-flexbox">
    <div class="collect" [class.collected]="stateStore.isCollected===1" (click)="handleCollect()">{{stateStore.isCollected===1?'已收藏':'收藏'}}</div>
    <button [disabled]="disposeGoodsPurchase"  (click)="handlePurchaseEvent(modal1)">{{goodsStatusText}}</button>
  </div>
</seed-content>
